<template>
  <el-dialog title="质检报告" v-model="show" center width="450px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false" destroy-on-close>
    <div class="v_dialog_body" v-loading="loading">
      <el-form :model="form" ref="form">
        <el-form-item label="上传图片" prop="image">
          <el-upload
              list-type="picture-card"
              drag
              :auto-upload="false"
              :on-change="getImage"
              :on-remove="onRemove"
              action=""
              :file-list="fileList"
              multiple>
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button  type="primary" icon="el-icon-check" size="small" v-on:click="doSave">确定</el-button>
      <el-button v-on:click="show = false" icon="el-icon-back" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      loading: false,
      show: false,
      billNo: null,
      callback: null,
      form: {},
      testModeList: [],
      fileList: []
    }
  },
  async mounted() {
    await this.getTestMode()
  },
  methods: {
    /**
     * 图片改变时
     * */
    getImage(file, fileList) {
      this.handleFileList(fileList)
    },
    /**
     *
     * @param fileList
     */
    handleFileList(fileList) {
      this.fileList = fileList.map(v => {
        return v
      })
    },
    /**
     * 图片删除时
     * @param e
     */
    onRemove(file, fileList) {
      this.handleFileList(fileList)
    },
    async getTestMode() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['testMode']
        });
        if (!res.res) return;
        this.testModeList = res.testMode;
      } finally {
        this.loading = false;
      }
    },
    open (row) {
      if (row != null) {
        let pics = []
        if (row.pics && row.pics.length > 0) {
          for(let i = 0; i < row.pics.length; i++) {
            pics.push({ path: row.pics[i], url: row.picList[i] })
          }
        }
        this.form = Object.assign({}, row)
        this.fileList = pics
      }
      this.show = true
    },
    async doSave() {
      try {
        let file = []
        let pics = []
        if (this.fileList && this.fileList.length > 0) {
          this.fileList.forEach(v => {
            if (v.raw) {
              file.push(v.raw)
            } else {
              pics.push(v.path)
            }
          })
        }
        let res = await this.callApi('upload_report', {
          billNo: this.form.billNo,
          files: file,
          picList: JSON.stringify(pics),
        })
        if (!res.res) {
          return
        }
        this.$message.success(`保存成功!`)
        this.show = false
        this.$emit("save")
        this.$emit("success")
      } finally {
        this.loading = false;
      }
    },
  }
}
</script>

<style scoped lang="scss">
.content {
  padding: 0 10px 20px 10px;
}
:deep(.el-upload-dragger) {
  height: 146px !important;
  width: 146px !important;
}
</style>
